<template>
  <div class="container">
    <el-card style="margin: 10px 0 0 10px">
      <!-- 头部 -->
      <el-form :inline="true" :model="tagFrom">
        <el-form-item label="目录名称">
          <el-input v-model="tagFrom.tagName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            size="small"
            v-model="tagFrom.state"
            placeholder="请选择"
            @focus="changeState"
          >
            <el-option
              v-for="(item, index) in ['禁用', '启用']"
              :key="item"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center" style="width: 100%">
            <el-col>
              <el-button size="small " @click="clear">清除</el-button>
              <el-button size="small " type="primary" @click="search"
                >搜索</el-button
              >
            </el-col>
            <el-col :span="1">
              <el-button
                class="addtags"
                size="small"
                type="success"
                @click="addDirectory"
                ><i class="el-icon-edit"></i> 新增目录</el-button
              ></el-col
            >
          </el-row>
        </el-form-item>
        <template>
          <el-alert
            :title="`数据一共` + this.content.counts + `条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </template>
        <!-- 列表 -->
      </el-form>
      <el-table style="margin-top: 10px" v-loading="loading" :data="tableData">
        <el-table-column label="序号" type="index" />
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="标签名称" prop="tagName"> </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template v-slot="{ row }">
            {{ row.addDate }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals" />
        <el-table-column label="状态" prop="state">
          <template v-slot="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="200px">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="disable(row)">{{
              row.state === 1 ? '启用' : '禁用'
            }}</el-button>
            <el-divider direction="vertical" />
            <el-button
              type="text"
              size="mini"
              @click="revise(row)"
              :disabled="row.state === 0 ? true : false"
              >修改</el-button
            >
            <el-divider direction="vertical" />
            <el-button
              type="text"
              size="mini"
              @click="delList(row)"
              :disabled="row.state === 0 ? true : false"
              >删除</el-button
            >
            <el-divider direction="vertical" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :current-page="parseInt(page.page)"
          :page-sizes="[10, 20]"
          :page-size="parseInt(page.pagesize)"
          layout=" prev, pager, next, sizes,jumper"
          :total="page.counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
      <!-- 弹层 -->
    </el-card>
    <el-dialog
      :title="text"
      @close="closeDialog"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属学科">
          <el-select
            size="mini"
            style="width: 100%"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input size="mini" v-model="form.tagName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'

export default {
  name: 'direct',
  data () {
    return {
      rules: {
        tagName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      form: {},
      dialogVisible: false,

      tagFrom: {
        state: ''
      },
      text: '',
      show: false,
      tableData: [],
      loading: false,
      page: {
        page: null,
        pageSize: null
      },
      content: {
        counts: null
      },
      fromData: {
        tagName: '',
        subjectName: []
      },
      value: '',
      options: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleSizeChange (newPagesize) {
      this.page.pageSize = newPagesize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.page.page = newPage
      this.getList()
    },
    // 获取列表
    async getList () {
      const { data } = await list({
        pagesize: this.page.pageSize,
        page: this.page.page,
        oldPassword: this.page.oldPassword,
        newPassword: this.page.newPassword
      })
      this.content = data
      this.tableData = data.items
      this.tagFrom.state = data.items.state
      // console.log(res)
      this.page = data
    },
    // 删除
    async delList (row) {
      await this.$confirm('确定删除吗？', '提示', { type: 'warning' })
      await remove(row)
      this.getList()
    },
    // 禁用
    async disable (row) {
      await changeState({
        id: row.id,
        state: row.state ? 0 : 1
      })
      // console.log(res)
      this.getList()
    },
    // 新增
    async addDirectory (id) {
      this.dialogVisible = true
      const res = await simple({ id: id })
      this.options = res.data
      this.text = '新增目录'
    },
    // 修改
    async revise (row) {
      this.dialogVisible = true
      this.text = '修改目录'
      this.form = row
      const res = await simple()
      this.options = res.data
      this.value = row.subjectName
    },

    // 确定
    async btnOk () {
      if (this.form.id) {
        await update({
          id: this.form.id,
          subjectID: this.form.subjectID,
          tagName: this.form.tagName
        })
        this.$message.success('修改成功！')
      } else {
        await add({
          ...this.form,
          subjectID: this.value
        })
        this.$message.success('添加成功！')
      }

      this.getList()
      this.closeDialog()
    },

    // 清除
    clear () {
      this.tagFrom.tagName = ''
      this.tagFrom.state = ''
      this.getList()
    },
    // 状态
    changeState () {},
    // 搜索
    search () {
      this.tableData = this.tableData.filter((v) => {
        return (
          v.tagName === this.tagFrom.tagName && v.state === this.tagFrom.state
        )
      })
    },

    closeDialog () {
      this.dialogVisible = false
      this.fromData = null
      this.form = {}
      this.value = ''
    }
  }
}
</script>

<style scoped lang="less">
.form-item {
  display: inline-block;
}
.addtags {
  margin-left: 230px;
}
</style>
